<!--
 * @Author: liujinjun681 liujinjun681@qq.com
 * @Date: 2022-09-08 16:04:23
 * @LastEditors: liujinjun681 liujinjun681@qq.com
 * @LastEditTime: 2022-11-21 08:43:08
 * @FilePath: \hd_ims_web\src\views\output\outputData\qrCode\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="24"></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>操作台</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="creatQr">生成二维码</el-button>
          </div>
          <el-form label-width="120px" :model="form" ref="formQr">
            <el-form-item label="生产日期" prop="rrqRq" required>
              <el-date-picker v-model="form.rrqRq" value-format="yyyy-MM-dd" @change="clearQr" />
            </el-form-item>
            <el-form-item label="客户代码">
              <el-autocomplete
                type="text"
                :fetch-suggestions="getAllCustomer"
                v-model="form.khdm"
                :trigger-on-focus="false"
                value-key="itmCustwldm"
                @select="FillAttribute" />
            </el-form-item>
            <el-form-item label="品名规格">
              <el-input size="large" v-model="form.pmgg"></el-input>
            </el-form-item>
            <el-form-item label="容量">
              <el-input size="large" v-model="form.rl"></el-input>
            </el-form-item>
            <el-form-item label="线号">
              <el-input size="large" v-model="form.xh"></el-input>
            </el-form-item>
            <el-form-item label="打印数量" prop="count" required>
              <el-input-number
                size="large"
                v-model="form.count"
                controls-position="right"
                :precision="0"
                :min="1"
                :max="100"
                @change="clearQr"></el-input-number>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>二维码</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="printQr">打印二维码</el-button>
          </div>
          <div class="scrollbarQr" id="printContent">
            <div class="divqr" v-for="(item, index) in listQr" :key="item.rrqId">
              <div style="border-bottom: 0.6mm solid; white-space: pre">V13168 {{ `&nbsp;&emsp;&nbsp;&nbsp;` }}荆州市衡德实业有限责</div>
              <div style="padding: 3mm 0mm">
                <VueQr :text="item.qr" :size="136" :margin="0"></VueQr>
                <ol class="ollist">
                  <li>{{ item.khdm }}</li>
                  <li>{{ item.pmgg }}</li>
                  <li>容量：{{ item.rl }} RDI</li>
                  <li>{{ item.xh }}#内机总装</li>
                </ol>
              </div>
              <div style="font-size: 12px; white-space: pre">
                {{ $moment(item.rrqRq).format('YYYY-MM-DD') }} 12:00 9170 {{ `&nbsp;&emsp;&nbsp;&nbsp;` }}武汉空调
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import VueQr from 'vue-qr'
import printJS from 'print-js'
import { getAll } from '@/api/repertory/Storage'
import { generateQr, updatePrint } from '@/api/repertory/putstorage'
import { automaticStorage, PDACusWldmList, getItmMstrByPDACustwldm, getStatisticsWarehousing } from '@/api/repertory/PDA'

import mixins from '@/mixins/common'

export default {
  name: 'GenerateQrJzyx',
  mixins: [mixins.listJtmJtbh],
  components: {
    VueQr,
  },
  data() {
    return {
      form: {
        rrqBc: '白班-A',
        rrqRq: new Date(),
        khdm: null,
        pmgg: '',
        count: '',
        rrqJtbh: '',
      },
      date: '',
      BcDm: '白班',
      customerCode: '',
      wldm: '',
      bzsl: '',
      pmgg: '',
      khdm: '',
      rkkh: '',
      rkck: '',
      pm: '',
      listQr: [],
      num: null,
      //提供的所有客户代码
      provider_list_data: [],
      //符合条件的客户代码
      provider_list: [],
      //入库仓库
      warehouse_list: [],
      //入库类型
      type_list: [],
      //入库客户
      kh_list: [],
      mainKey: this.$store.state.settings.sysName.indexOf('荆州') > -1 ? 'J2022-' : '2022-',
    }
  },
  created() {
    //请求所有客户代码
    PDACusWldmList().then((response) => {
      this.provider_list_data = response.data
    })
  },
  methods: {
    msg(msg, type) {
      this.$message({ showClose: true, message: msg, type: 'success' })
    },
    getBzsl(queryString, cb) {
      cb(
        this.bzsl.split(';').map((a) => {
          return { value: a }
        })
      )
    },
    printQr() {
      if (this.listQr.length == 0) {
        this.$message.warning('请先生成二维码！')
        return
      }

      setTimeout(() => {
        printJS({
          documentTitle: 'qr-' + this.customerCode,
          printable: 'printContent', // // 文档来源：pdf或图像的url，html元素的id或json数据的对象
          type: 'html', // 可打印的类型。可用的打印选项包括：pdf，html，图像，json和raw-html。
          style: ['@page { margin: 0mm;} body {margin: 0;} h4 {margin:0}'],
          targetStyles: ['*'], // 库在打印HTML元素时处理任何样式
        })
      }, 200)
    },
    creatQr() {
      this.$refs['formQr'].validate((valid) => {
        if (valid) {
          this.listQr = []
          this.form.qr = `{"materielCode":"${this.form.khdm}","prods":[{"prodNo":"${this.form.khdm}","state":"N"}],"ShouldNum":${this.form.rl},"SupplierNo":"V13168","binTagId":"17296519642040749945","billNo":"J241023A17320"}`
          for (let i = 0; i < this.form.count; i++) {
            this.listQr.push(this.form)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    clearQr() {
      this.listQr = []
    },
    clearALL() {
      this.listQr = []
      this.date = ''
      this.wldm = ''
      this.pmgg = ''
      this.pm = ''
      this.rkkh = ''
      this.rkck = ''
      this.form.rrqWldm = ''
      this.num = null
      // this.handleFocus('start')
    },
    getAllCustomer(queryString, cb) {
      if (this.form.khdm == null || this.form.khdm == '') {
        return
      }
      let temp = []
      this.clearALL()
      temp = this.provider_list_data
        .filter((i) => {
          const a = i.itmCustwldm.match(/\d{4}(?!\d)/g)
          return a && a[a.length - 1].indexOf(this.form.khdm) != -1
        })
        .slice(0, 30)
      cb(temp)
    },
    FillAttribute() {
      this.listQr = []
      if (this.form.khdm == null || this.form.khdm == '') {
        return
      }

      getItmMstrByPDACustwldm({ itmCustwldm: this.form.khdm }).then((res) => {
        if (res.code == '200') {
          // this.form.khdm = res.data.itmCustwldm
          this.form.pmgg = res.data.itmWlpm
        } else {
          alert(res.msg)
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.app-container {
  ::v-deep .is-disabled .el-input__inner {
    background-color: #ffffff;
    color: #ff0000;
  }
}

.divqr {
  height: 80mm;
  width: 80mm;
  padding: 14mm 7mm;
  page-break-inside: avoid;
  position: relative;
  > div {
    page-break-inside: avoid;
    display: flex;
    font-weight: 700;
    letter-spacing: 0.2mm;
  }
  .ollist {
    list-style-type: none;
    margin: 1mm 2mm;
    width: 25mm;
    font-size: 12px;
    font-weight: 700;
    line-height: 5mm;
    word-break: break-all;
  }
}
.scrollbarQr {
  // height: 500px;
  // overflow-y: auto;
  width: 80mm;
  ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  ::v-deep .is-horizontal {
    display: none;
  }
}
</style>
